<template>
	<div class="selectdetail">
    <h5><span>您可能会问以下问题：</span><em><img src="@/assets/question/refresh.png" alt="" @click="refreshQues()"></em></h5>
    <div class="questionlist">
      <li :class="{selected:item.state}" v-for="(item,index) in queslist" :key="index" @click="selectQues(item.state,index)">{{item.title}}</li>
     
    </div>
    <div class="text_ques">
      <h6>上面没有我想问的问题，我想提问：</h6>
      <p class="tips">注：仅限提出单个问题，多个问题老师会选择其中一个问题作答！ </p>
      <div class="text_cont">
        <textarea :disabled="dis" name="" id="" :class="{caogao:iscaogao}" @focus="textareaFocus"  placeholder="请详细描述您的情感状态、背景信息以及具体问题。2小时内无人回答，将按支付路径全额退款。" v-model="questiontext"></textarea>
        <em :class="{caogao:iscaogao}">（草稿）</em>
        <span>{{textnum}}/150</span>
      </div>
    </div>
    <div class="bottom_btn">
      <span :class="{btnactive:btnActive}" @click="goaskQues()">下一步</span>  
    </div>		
	</div>
    
</template>
<script>
export default {
  data(){
    return{
			queslist:[],
      cid:this.$route.query.cid,    
      questiontext:'',
      // isselected:false,//当前是否有选中
      iscaogao:false,
      page:0,
      dis: false
    }
  },
  computed:{
    textnum(){
      return this.questiontext.length;
    },
    isselected(){
      // 当前是否有选中的问题
      for(var i in this.queslist){
        if(this.queslist[i].state){
          return true;
        }
      };
      return false; 
    },
    btnActive(){
      return this.isselected || this.textnum > 0 || false;
    }
  },
  watch:{
    questiontext(val){
      console.log(val);
      var len = val.length;
      len && this.queslist.forEach((value,key)=>{
          value['state'] = false;
        })
      len > 150 && ( this.questiontext = val.substr(0,150) );

    }
  },
  created(){
    this.getQueslist();
  },
  methods:{
    getQueslist(){
 			this.$http.fetchGet("getFlashList", {
        cat_id:this.cid,
        offset:this.page*6,
        limit: 6
      }).then(({ data }) => {
        var listdata = data;
        if(listdata.length !== 6){
          this.page =-1;
          return;
        }
        listdata.forEach((value,key)=>{
          value['state'] = false;
        })
        this.queslist = listdata;
      });
    },
    refreshQues(){
      this.page++;
      this.getQueslist();
    },
    selectQues(state,index){
      this.textnum && (this.iscaogao = true);
      this.queslist.forEach((v,i)=>{
        if(i == index){
          // v.state = !state;
          v.state = true;
        }else{
          v.state = false;
        }
      })
    },
    textareaFocus(){
      this.iscaogao = false;
    },
    goaskQues(){
      if(!this.btnActive ){
        this.$vux.toast.text("请选择问题或自主填写");
        return;
      }
       var fqId = '',fqtext=this.questiontext;
      if(this.isselected){
        this.queslist.forEach((v,k)=>{
          if(v.state){
            fqId = v.fqId;
          }
        })
        fqtext='';
      }
      this.$router.push({
				path: '/selectmaster',
				query: {
          cid:this.cid,
          fqId: fqId,
          fqtext:fqtext,
				}
			}) 
    },
  }
  
}
</script>

<style scoped lang="less">
  .selectdetail{
    h5{
      height: 1.426667rem;
      padding:0 .533333rem;
      font-size: .373333rem;
      color: #333;
      font-weight: normal;
      .flex();
      .justify-content(space-between);
      .align-items(center);
      em{
        display: block;
        width: .426667rem;
        height: .333333rem;
        img{
          width: 100%;
          height: .33333rem;
        }
      }
    }
    .questionlist{
      padding: 0 .466667rem;
      li{
        height:.906667rem;
        line-height: .906667rem;
        padding-left: .306667rem;
        box-sizing: border-box;
        font-size: .32rem;
        color: #333;
        margin-bottom: .4rem;
        list-style: none;
        background:rgba(255,255,255,1);
        border:1px solid rgba(51,51,51,1);
        border-radius:.133333rem;
        position: relative;
        &.selected{
          border-color: #189BEB;
          &:after{
            width:.626667rem;
            height:.573333rem;
            position: absolute;
            background:url("../../assets/question/selected.png") no-repeat center;
            background-size: contain;
            top: -1px;
            right:-1px;
            content:''
          }
        }
      }
    }
    .text_ques{
      padding: .4rem .266667rem 0;
        margin-bottom: .826667rem;

      h6{
        font-size: .32rem;
        color: #333;
      }
      .tips{
        font-size: .266667rem;
        color: #E73828;
        margin-bottom: .386667rem;
        margin-top: 5px;
      }
      .text_cont{
        position: relative;
        span{
          position: absolute;
          left: .226667rem;
          bottom:5px;
          color: #999999;
          font-size: .266667rem;
        }
      }
      .error{
        color: #f30;
        margin: 5px 0;
        padding-left: 3px;
      }
      textarea{
        height:3rem;
        -webkit-appearance: none;
        padding: .266667rem;
        box-sizing: border-box;
        width: 100%;
        background:rgba(244,245,246,1);
        border-radius:.133333rem;
        border: none;
        color: #333;
        &.caogao{
          text-indent: 4em;
        }
      }
      em{
        position: absolute;
        top: .267rem;
        left: .267rem;
        color: #E73828;
        font-style: normal;
        display: none;
        &.caogao{
          display: block;
        }
      }

    }
    .bottom_btn{
      padding: .266667rem;
      box-sizing: border-box;
      span{
        display: block;
        height:1.2rem;
        line-height: 1.2rem;
        text-align: center;
        width: 100%;
        background:rgba(24,155,235,1);
        opacity:0.47;
        border-radius:.066667rem;
        color: #ffffff;
        font-size: .4rem;
        &.btnactive{
          opacity:1;
        }
      }
     
    }
  }
</style>

